<template>
	<view class="BOX">
		<uni-popup ref="popup1">
		  <view class="popup">
		    <view class="p-title">
		      <image :src="rzimg" mode="heightFix" style="height: 186rpx"></image>
		    </view>
		    <view class="p-b-card">
		      <text class="c-text">请先完成实名认证信息,便于发放薪资,谢谢</text>
		    </view>
		    <view class="p-b-but">
		      <button class="but but2" plain @click="renClick">立即认证</button>
		    </view>
		  </view>
		</uni-popup>
		<view class="order-top">
			<view class="order-top-location" v-if="order_info.status !== 5">
				<view class="img">
					<image :src="address.store_photos" mode=""></image>
				</view>
				<view style="width: 490rpx;">
					<text style="font-size: 32rpx;"> {{address.hotel_name}} </text>
					<view class="ellipsis1" style="font-size: 26rpx;margin-top: 10rpx;">{{address.detail_address}}</view>
				</view>
				<view class="order-info-map" @click="mapClick()">
					<image src="../../../static/imgas/map.png" mode=""></image>
					<view> 导航</view>
				</view>
			</view>
			<!-- <view class="order-top-text" v-if="order_info.status !== 5">
				<text style="margin-right: 20rpx;"> 开 始 日 期 ：{{order_info.service_time}}</text>
				<text> 上 班 时 间 ：{{order_info.work_time}}</text>
			</view>
			<view class="order-top-text" v-if="order_info.status === 5">
				<text style="margin-right: 20rpx;">{{order_info.cancel_reason || ''}}</text>
			</view> -->
			<view class="order-info ">
				<view class="order-info-relation">
					<view class="order-info-relation-top">
						<text>联系方式：</text>
						<!-- <text> {{address.a_name}}</text> -->
						<text  class="order-info-color" v-if="order_info.is_signup == 1"  @click="openTel()">
							{{address.tel}}<text style="color:#33D182 ;margin-left: 20rpx;">拨打</text>	
						</text>
						<text  class="order-info-color" v-else>
							报名后可查看
						</text>
					</view>
					<view class="order-info-relation-bottom">
						<text>起止日期：</text>
						<text  class="order-info-color">{{info.service_start_time}}至{{info.service_end_time}}</text>
						<view  class="order-info-color" style="float: right;">共<text style="font-size: 32rpx;color: #FF4B4B;">{{ info.service_day}}</text> 天</view>
					</view>
					<view class="order-info-relation-bottom">
						<uni-col :span="15" v-if="order_info.order_class >= 2 && order_info.duty_time_type == 2">
							<view class="demo-uni-col ">								
								<text >上班时间：</text>		
								<text class="demo-uni-col2">{{order_info.duty_time}} 预计时长：{{order_info.time_num}}</text>
							</view>
						</uni-col>
						<uni-col :span="9" v-if="order_info.order_class >= 2 &&  order_info.duty_time_type == 2">
							<view class="demo-uni-col ">
								<text>到岗时间：</text>
								<text   class="demo-uni-col2">{{order_info.work_time}}</text>
							</view>
						</uni-col>
						<uni-col :span="14" v-if="order_info.order_class >= 2 && order_info.duty_time_type == 1">
							<view class="demo-uni-col ">								
								<text >上班时间：</text>		
								<text  class="demo-uni-col2">{{order_info.duty_time}}</text>
							</view>
						</uni-col>
						<uni-col :span="10" v-if="order_info.order_class > 2 &&  order_info.duty_time_type == 1">
							<view class="demo-uni-col ">
								<text>到岗时间：</text>
								<text class="demo-uni-col2">{{order_info.work_time}}</text>
							</view>
						</uni-col>
						<uni-col :span="14" v-if="order_info.order_class == 1">
							<view class="demo-uni-col ">
								<text>到岗时间：</text>
								<text   class="demo-uni-col2">{{order_info.work_time}}</text>
							</view>
						</uni-col>
						<uni-col :span="10" v-if="order_info.order_class == 1">
							<view class="demo-uni-col ">
								
							</view>
						</uni-col>
					</view>
				</view>
				<view class="order-info-relation2">
					<!-- <view class="order-info-phone" @click="openTel()" v-if="order_info.is_signup === 1">
						<text>拨打</text>
						<uni-icons type="phone-filled" color="#33D182" size="16"></uni-icons>
					</view> -->
					<!-- <view class="order-info-map" @click="mapClick()">

						<text> 导航</text>
						<uni-icons style="margin-left: 10rpx;" color="#50e28c" custom-prefix="iconfont"
							type="icon-weizhi" size="30r"></uni-icons>
					</view> -->
				</view>
			</view>
		</view>
		<view class="order-information">
			<uni-card :is-shadow="false" :border="false" :padding="10" :margin="0">
				<view class="order-information-room">
					<view class="order-information-room-info">
						<view class="order-information-room-info-son" v-if="order_info.order_class == 1">
							<view class="order-information-room-info-son-t">
								<text style="color:#FF4B4B">{{order_info.room_number|| '0'}}</text><text style="color:#000">间</text><text
									class="order-information-room-info-son-b2">/1人</text>
							</view>
							<view class="order-information-room-info-son-b">
								<uni-icons color="#FF4B4B" custom-prefix="iconfont" type="icon-shuxian" size="22r">
								</uni-icons>
								<text>保底房量</text>
							</view>
						</view>
						<view class="order-information-room-info-son" v-if="order_info.order_class == 1">
							<view class="order-information-room-info-son-t">
								<text>{{order_info.unit_price || '0'}}</text><text class="order-information-room-info-son-b2">元/1间</text>
							</view>
							<view class="order-information-room-info-son-b">
								<uni-icons color="#FF4B4B" custom-prefix="iconfont" type="icon-shuxian" size="22r">
								</uni-icons>
								<text>做房单价</text>
							</view>
						</view>
						<view class="order-information-room-info-son" v-if="order_info.order_class >= 2">
							<view class="order-information-room-info-son-t">
								<text style="color:#FF4B4B">{{order_info.unit_price|| '0'}}</text>
								<text class="order-information-room-info-son-b2">
									/{{order_info.hourly_wage_type == 1 ? '小时' :"天"}}
								
								</text>
							</view>
							<view class="order-information-room-info-son-b">
								<uni-icons color="#FF4B4B" custom-prefix="iconfont" type="icon-shuxian" size="22r">
								</uni-icons>
								<text>工作时薪</text>
							</view>
						</view>
						<view class="order-information-room-info-son">
							<view class="order-information-room-info-son-t">
							<text><text style="color:#FF4B4B">{{earning}}</text><text style="color:#000">/元</text></text>
							</view>
							<view class="order-information-room-info-son-b">
								<uni-icons color="#FF4B4B" custom-prefix="iconfont" type="icon-shuxian" size="22r">
								</uni-icons>
								<text>预计收入</text>
							</view>
						</view>
						
						<!-- 						<view class="order-information-room-info-son">
							<view class="order-information-room-info-son-t">
								<text>￥{{room_type[1].price|| '0'}}</text><text
									class="order-information-room-info-son-b2">/间</text>
							</view>
							<view class="order-information-room-info-son-b">
								<uni-icons color="#FF4B4B" custom-prefix="iconfont" type="icon-shuxian" size="22r">
								</uni-icons>
								<text>{{room_type[1].type_name}}</text>
							</view>
						</view> -->
						
					</view>
				</view>
			
				<view class="fengexian"></view>
				<view class="order-xuqiu" v-show="order_info.order_type === 3">
					<uni-row class="demo-uni-row">
						
						<uni-col :span="14">
							<view class="demo-uni-col ">
								<text >需求人数：</text>
								<text  class="demo-uni-col2" v-if="order_info.gender_require_type ==0">{{order_info.people_number}}人</text>
								<text  class="demo-uni-col2" v-else>{{order_info.gender_require}}</text>
							</view>
						</uni-col>
						<uni-col :span="10">
							<view class="demo-uni-col ">
								<text>已报名：</text>
								<text class="demo-uni-col2" v-if="order_info.gender_require_type ==0">{{order_info.signup_people_number}}人</text>
								<text class="demo-uni-col2 "v-else>{{order_info.man_signup_people_number}}男/{{order_info.woman_signup_people_number}}女</text>
							</view>
						</uni-col>
						
					<!-- 	<uni-col :span="14">
							<view class="demo-uni-col ">
								<text 
									class="demo-uni-col2">性别/年龄：</text>
								<text>{{genderStatus[order_info.gender_require]}}/{{order_info.age_require}}岁</text>
							</view>
						</uni-col>
						<uni-col :span="10">
							<view class="demo-uni-col ">
								<text class="demo-uni-col2">等级要求：</text>
								<text>{{order_info.level_require}}</text>
							</view>
						</uni-col> -->
						
						<uni-col :span="14" v-if="order_info.order_class >= 2">
							<view class="demo-uni-col ">
								<text>年龄：</text>
								<text  class="demo-uni-col2">{{order_info.age_require}}</text>
							</view>
						</uni-col>
				<!-- 		<uni-col :span="14" v-if="order_info.order_class == 2">
							<view class="demo-uni-col ">
								<text>x：</text>
								<text  class="demo-uni-col2">{{order_info.gender_require}}/{{order_info.age_require}}</text>
							</view>
						</uni-col> -->
						<uni-col :span="10" v-if="order_info.order_class >= 2">
							<view class="demo-uni-col ">
								<text>交通：</text>
								<text  class="demo-uni-col2">{{order_info.traffic_type == 1?'自行到岗': order_info.traffic_price+'元/天'}}</text>
							</view>
						</uni-col>
						<uni-col :span="14">
							<view class="demo-uni-col ">
								<text>工作餐：</text>
								<text  class="demo-uni-col2">{{order_info.meal_allowance==0?'包餐':order_info.meal_allowance_price+'元/天'}}</text>
							</view>
						</uni-col>
						<uni-col :span="10">
							<view class="demo-uni-col ">
								<text>住宿：</text>
								<text  class="demo-uni-col2">{{order_info.stay==1?'包住':'无住宿'}}</text>
							</view>
						</uni-col>

						<uni-col :span="14" >
							<view class="demo-uni-col ">
								<text>结算方式：</text>
								<text  class="demo-uni-col2">{{order_info.jiesuan}}</text>
							</view>
						</uni-col>
						<!-- <uni-col :span="10">
							<view class="demo-uni-col ">
								<text class="demo-uni-col2">打扫类型：</text>
								<text>{{cancelStatus[order_info.cleaning_type]}}</text>
							</view>
						</uni-col> -->
					</uni-row>
				</view>
			</uni-card>
		</view>
<!-- 		<view class="order-welfare"
			v-show="order_info.order_type === 3||order_info.status ===1||order_info.status ===3">
			<uni-card title="福利补贴" :is-shadow="false" :border="false" :padding="0" :margin="0">
				<view class="order-welfare-top" style="margin-bottom: 20rpx;">
					<text class="lv">补贴金额：</text>
					<text>{{order_info.subsidy}}元</text>
				</view>
				<view class="order-welfare-bottom" v-if="order_info.order_type === 3" style="margin-bottom: 20rpx;">
					<text class="lv">福利：</text>
					<text>{{mealAllowanceFilter[order_info.meal_allowance]}}、{{fatigueDressFilter[order_info.traffic_type]}}、{{stayFilter[order_info.stay]}}
					</text>
				</view>
			</uni-card>
		</view> -->

		<view class="order-welfare" v-if="order_info.order_type !== 3&&order_info.status ===2">
			<uni-card title="服务详情" :is-shadow="false" :border="false" :padding="0" :margin="0">
				<view class="order-welfare-fuwu" v-for="(item, index) in service_details_data" :key="index">
					<view>
						<text class="lv lv2">{{item.cleaner_name}}:</text><text style="margin-right: 15rpx;"
							v-for="(item2,index2) in item.room_type_info"
							:key="index">{{item2.room_type_name}}X{{item2.room_num}}</text>
					</view>
					<text style="font-size: 32rpx;">￥{{item.money}}</text>
				</view>
				<view class="order-welfare-fuwu">
					<text class="lv lv2 lv3">服务时间</text>
					<text>{{order_info.service_time}}</text>
				</view>
				<view class="order-welfare-fuwu">
					<text class="lv lv2 lv3">备注</text>
					<text>{{order_info.remarks || ''}}</text>
				</view>
				<view class="order-welfare-fuwu">
					<text class="lv lv2 lv3">补贴总额</text>
					<text style="color: #FF4B4B; font-size: 32rpx;">￥{{order_info.subsidy}}</text>
				</view>
				<view class="order-welfare-fuwu">
					<text class="lv lv2 lv3">订单总额</text>
					<text style="color: #FF4B4B; font-size: 32rpx;">￥{{order_total_money}}</text>
				</view>
			</uni-card>
		</view>
<!-- 		<view class=" order-welfare">
			<uni-card title="订单信息" :is-shadow="false" :border="false" :padding="0" :margin="0">
				<view class="order-welfare-son">
					<text class="lv lv2">订单编号</text>
					<text>{{order_info.order_num}}</text>
				</view>
				<view class="order-welfare-son">
					<text class="lv lv2">下单时间</text>
					<text>{{order_info.create_time}}</text>
				</view class="order-welfare-son">
				<view class="order-welfare-son"
					v-if="order_info.hotel_confirm_time !== '--' && order_info.status === 2">
					<text class="lv lv2">确认时间</text>
					<text>{{order_info.hotel_confirm_time}}</text>
				</view>
				<view class="order-welfare-son"
					v-if="order_info.hotel_pay_time !== '--'  && (order_info.status === 2 || order_info.status === 3|| order_info.status === 4)">
					<text class="lv lv2">支付时间</text>
					<text>{{order_info.hotel_pay_time}}</text>
				</view>
				<view class="order-welfare-son"
					v-if="order_info.hotel_evaluate_time!== '--'  && order_info.status === 4">
					<text class="lv lv2">评价时间</text>
					<text>{{order_info.hotel_evaluate_time}}</text>
				</view>
				<view class="order-welfare-son" v-if="order_info.hotel_cancel_time !== '--' && order_info.status === 5">
					<text class="lv lv2">取消时间</text>
					<text>{{order_info.hotel_cancel_time}}</text>
				</view>


			</uni-card>
		</view> -->
<!-- 		<view class="order-welfare" v-if="order_info.order_class ==1">
			<uni-card title="清洁要求" :is-shadow="false" :border="false" :padding="0" :margin="0">
				
				
				<view class="order-welfare-top" style="margin-bottom: 20rpx;">
					<text>	{{cleaner_rule}}</text>	
				</view>
				<view>	{{clean_requirements[0] || ''}}</view>
			</uni-card>
		</view> -->
		<view class="order-big-img" >
			<uni-card title="备注信息" :is-shadow="false" :border="false" :padding="0" :margin="0">
				<view class="order-welfare-top" style="margin-bottom: 20rpx;text-align: left;">
					<text>	{{order_info.remarks}}</text>	
				</view>
				<view class="" v-if="cleanliness_standard.length  > 0">
					<swiper   class="swiper" circular :indicator-dots="indicator-dots" autoplay :interval="2000" :duration="500">
						<swiper-item v-for="(index,item) in cleanliness_standard" :key="index">
							<image :src="index" mode="widthFix" @click="lookImg(index)"></image>
						</swiper-item>
					</swiper>
				</view>
			
		
			</uni-card>
		
		</view>
		<view class="">
			<view class="tui-box">
				<view class="tui-xian"></view>
				推荐工作
				<view class="tui-xian"></view>
			</view>
			<uni-section >
			  <view v-if="tuiList.length" class="home-order">
			    <uni-list :border="false">
			      <uni-list-item :border="false" v-for="itme in tuiList" :key="itme.id">
			        <template v-slot:header style='width: 30%;'>
			          <view class="v-slot-header" v-if="itme.is_full === 0 && itme.is_start === 1">
			            <view class="v-slot-header-son">
			              <text>招聘中</text>
			            </view>
			            <image class="h-o-c-img" :src="itme.logo[0]" mode=""></image>
			          </view>
			          <view class="v-slot-header" v-else>
			            <view class="v-slot-header-son" v-if="itme.is_full == 1 || itme.is_start === 0">
			              <text v-if="itme.is_full == 1">已满</text>
			              <!-- <text v-else>暂停</text> -->
			            </view>
			            <image class="h-o-c-img" :src="itme.logo[0]" mode=""></image>
			          </view>
			        </template>
			        <template v-slot:body style='display: inline-block;'>
			          <view class="v-slot-body-box" @click="listClick(itme)">
			            <view class="v-slot-body">
			              <text class="ellipsis1 " style="width: 100%;">{{itme.position_text}}{{ itme.hotel_name || "" }}</text>
			              <!-- <text class="time"
			                >({{ itme.service_time.split("-")[1] || "" }}月{{ itme.service_time.split("-")[2] || "" }}日{{
			                  itme.work_time || ""
			                }})</text
			              > -->
			            </view>
						<view class="hday">
							<view class="">{{itme.service_start_time}}至{{itme.service_end_time}}</view>
							<view style="color: #2D2D2D;">共 <text style="font-size: 32rpx;color: #F81F43;">{{itme.service_day}}</text>天</view>
						</view>
			            <view class="h-o-b-main">
			              <view class="h-o-b-main-son">
			                <text class="unit_price">￥{{ itme.unit_price || "" }}</text>
							
							<text style="font-size: 26rpx" v-if="itme.order_class==1">/间</text>
							<text style="font-size: 26rpx" v-else>/{{itme.hourly_wage_type==1?'时':'天'}}</text>
							<text style="font-size: 24rpx;color: #717076;margin-left: 20rpx;" v-if="itme.floor_room&&itme.order_class==1">保底{{itme.floor_room}}间</text>
			              </view>
			              <view class="recommend" v-if="itme.recommended_amount != 0.0">
			                <view class="recommend-l">
			                  <text>推荐</text>
			                </view>
			                <view class="recommend-r">
			                  <text>{{ itme.recommended_amount }}元/人</text>
			                </view>
			              </view>
						  <view class="" style="flex: 1;text-align: right; align-items: center">
						    <uni-icons
						      style="margin-right: 10rpx"
						      color="#50e28c"
						      custom-prefix="iconfont"
						      type="icon-weizhi"
						      size="30r"
						    ></uni-icons>
						    <text class="juli">{{ itme.distance }}</text>
						  </view>
			            </view>
			          </view>
			        </template>
					<template v-slot:footer>
						<!-- 底部 -->
						<view class="h-o-b-main pb" @click="listClick(itme)" style="margin-bottom: -20rpx;">
							<view class="h-o-b-main-anticipated_revenue" style="flex: 1">
							  <text class="juli">预计收入:</text>
							  <text class="unit_price" style="color:#FF4B4B">￥{{ itme.anticipated_revenue || "" }}</text>
							</view>
							<view class="qiangBtn">抢单</view>
						</view>
					</template>
			      </uni-list-item>
			    </uni-list>
			  </view>
			  <view v-else class="home-empty">
			    <image class="h-o-img" :src="zanwudingdan" mode=""></image>
			    <text class="h-o-text">目前暂无订单</text>
			  </view>
			</uni-section>
		</view>
		<view class="order-btn order-btn-fixed" v-if="order_info.status === 1 && order_info.order_type === 3 && wei_type == ''">
			<button style="	border-radius: 80rpx 0 0 80rpx;color: #F81F43;"  id="shareBtn" open-type="share" type="default" @click="recommend">立即推荐 <text v-if="order_info.recommended_amount > 0" style="color: #fff;font-size: 26rpx;margin-left: 10rpx;">(奖励￥{{order_info.recommended_amount}})</text> </button>
			<view style="height: 80rpx;background: #000;width: 5rpx;"></view>
			<button @click="startOrder" v-if="order_info.is_signup === 0" style="background-color: #1C2D43;">立即报名</button>
			<button @click="closeOrderQueding" v-else>取消报名</button>
		</view>
		<view style="width: 100%;">
			<uni-popup ref="closeRulePopup">
				<view class="closeRule">
					<image :src="tdgz" mode=""></image>
					<view class="closeRuleText">
						<view class="">
							<text>1、15分钟内可以取消。</text>
						</view>
						<view class="">
							<text>2、报名成功，逾期未到岗位，酒店投诉，将无法在平台再次接单。</text>
						</view>
						<view class="order-btn ">
							<button class="button1" @click="RulePopupClose" style="width: 170rpx;">取消</button>
							<button @click="startOrder1" style="width: 170rpx;">确定报名</button>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<view style="width: 100%;">


			<uni-popup ref="closeWeiPopup" type="dialog">
							<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="您有违约记录,请缴纳保证金后再接单,谢谢" @confirm="weidialogConfirm"
								@close="weidialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
		<view style="width: 100%;">
		
		
			<uni-popup ref="closebaoPopup" type="dialog">
							<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="请缴纳保证金后再接单,谢谢" @confirm="baodialogConfirm"
								@close="baodialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
	
	</view>

</template>

<script>
	export default {
		data() {
			return {
				cleaner_rule: '', // 清洁要求
				order_id: null, // 报名页面传来的订单id
				cleaner_id: null, // 保洁id
				page1: 1, // 评论初始页码
				total1: 0, // 评论数据总条数
				uid: '', // 点击评论的当前列id
				weiyue_count:0,
				bond:0,
				zanwudingdan: `${getApp().globalData.imgScr}bj/zanwudingdan.png`,
				imgUrl: `${getApp().globalData.imgScr}jd/dingdankongzhuangtai.png`,
				imgUrl1: `${getApp().globalData.imgScr}jd/xinji.png`,
				imgUrl2: `${getApp().globalData.imgScr}jd/yikaoshi.png`,
				imgUrl3: `${getApp().globalData.imgScr}jd/yipeixun.png`,
				imgUrl4: `${getApp().globalData.imgScr}jd/shimingrenzheng.png`,
				imgUrl5: `${getApp().globalData.imgScr}jd/dizhi.png`,
				imgUrl6: `${getApp().globalData.imgScr}jd/pj2.png`,
				imgUrl7: `${getApp().globalData.imgScr}jd/yuyueshijian.png`,
				shouchang: `${getApp().globalData.imgScr}jd/shouchang.png`, // 未点赞图片
				shouchangXz: `${getApp().globalData.imgScr}jd/shouchang_xz.png`, // 已点赞图片
				tdgz: `${getApp().globalData.imgScr}bj/tdgz.png`,
				// 联系人信息
				address: {
					a_name: '', // 联系人姓名
					tel: '', // 联系人电话
					road: '', // 联系人地址
					addr_longitude: '', // 联系人经度
					addr_latitude: '', // 联系人纬度
				},
				navActive: 0,
				info: {},
				// 订单信息
				type: 2, //类型1-酒店,2-保洁  
				//
				order_info: {
					hotel_name: '', //酒店名称  
					order_num: '', //订单号    
					status: '', //订单状态1-已提交,2-已确认房型数量,3-已支付,4-已评价,5-已取消 
					service_time: '', //服务时间  
					work_time: '', //上班时间    
					create_time: '', //创建时间    
					hotel_confirm_time: '', //酒店确认房型数量时间  
					hotel_pay_time: '', //酒店支付完成时间    
					hotel_evaluate_time: '', //酒店评价时间  
					hotel_cancel_time: '', //酒店取消时间    
					cancel_reason: '', //取消原因    
					cleaning_type: 1, //打扫类型1住房2退房3部不分退住  
					people_number: 0, //需求人数  
					signup_people_number: 0, //已报名人数  
					gender_require: 1, //性别要求1男2女3不限  
					age_require: '', //年龄要求 例:18-25  
					expect_room_number: 0, //预计房量  
					level_require: '', //等级要求  
					subsidy: '', //补贴金额  
					meal_allowance: 1, //是否管饭0不管饭1一餐2两餐3三餐  
					fatigue_dress: 1, //是否提供工作服1提供0不提供  
					stay: 1, //是否提供住宿1提供0不提供  
					is_start: 1, //订单是否开启  
					order_type: 1, //订单类型1长期工2短期工3报名订单  
					remarks: '', // 备注
					is_signup: null // 是否报名  0 没报   1报过
				},
				mealAllowanceFilter: {
					0: '包餐',
					1: '餐补',
				},
				fatigueDressFilter: {
					1: '自行到岗',
					2: '交通补'
				},
				stayFilter: {
					0: '无住宿',
					1: '包住'
				},
				rzimg: `${getApp().globalData.imgScr}bj/rz.png`,
				tuiList: [],
				order_total_money: '', // 订单总额
				// 酒店房型
				room_type: [],
				clean_requirements: [], //清洁要求  
				cleanliness_standard: [], //清洁标准图片    
				service_details_data: [],
				earning: '', //酒店预计支出/保洁预计收入  
				// 订单状态
				orderStatus: {
					1: '已提交',
					2: '已确认房型数量',
					3: '已支付',
					4: '已评价',
					5: '已取消',
				},
				params: '',
				// 打扫类型
				cancelStatus: {
					1: '住房',
					2: '退房',
					3: '不分退住',
				},
				// 要求性别
				genderStatus: {
					0: '不限',
					1: '男',
					2: '女'
				},
				// 等级要求
				levelStatus: {
					'1': '初级',
					'2': '中级',
					'3': '高级',
				},
				cleaningData: {},
				data: { // 客服相关信息
					tel: '' // 客服电话
				},
				valiFormData: {
					people_number: '', // 需求人数
					expect_room_number: '', // 预计房量
				},
				cleaner_longitude: uni.getStorageSync('cleaningData').longitude,
				cleaner_latitude: uni.getStorageSync('cleaningData').latitude,
				rules: {
					people_number: {
						recruits: [{
							required: true,
							errorMessage: '请输入需求人数'
						}]
					},
					expect_room_number: {
						recruits: [{
							required: true,
							errorMessage: '请输入预计房量'
						}]
					},
				},
				wei_type:''
			};
		},
	
		onLoad: function(option) { //option为object类型，会序列化上个页面
		
		console.log(option);
			if(option.order_id){
				uni.setStorageSync('order_id', option.order_id);
			}
			this.order_id = option.id ? option.id : option.order_id
		
			// 接收传来的订单id
			if (option.order_id && option.openid) {
				uni.setStorageSync('order_signup_' + option.order_id, option.openid);
			}
			if(option.wei_type){
				this.wei_type = option.wei_type
			}
			// if (uni.getStorageSync('cleaningData').state !== 2 && !uni.getStorageSync('cleaningData').loin) {
			// 	uni.navigateTo({
			// 		url: "/cleaningAdmin/home/home"
			// 	});
			// }

		},
		onShow() {
			this.getOrderInfo()
			this.configData()
			this.userinfo_bond()
		},
		methods: {
			// 清洁要求
			configData() {
				let _this = this
				this.$http.get('/index/Communal/config_data', {
					config_id: 6
				}).
				then(res => {
					_this.cleaner_rule = res.cleaner_rule.value
					console.log('res', res)
				})
			},
			getQi(){
				const params = {
					cleaner_latitude: this.cleaner_latitude ? this.cleaner_latitude : 34.343305,
					cleaner_longitude: this.cleaner_longitude ? this.cleaner_longitude : 108.939672,
					order_id: this.order_id,
					order_class: this.order_info.order_class,
				}
				this.$http.post('/index/Cleanerindex/recommended_job', params).then(res => {
					this.tuiList = res.data
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						icon: "none"
					})
				})
			},
			lookImg(url) {
				uni.previewImage({
					urls:[url]
				})
			},
			/**
			 * 
			 * 获取订单详情列表详情
			 */
			getOrderInfo() {
				let _this = this
				const params = {
					id: _this.order_id,
					type: 2
				}
				console.log('params', params)
				uni.showLoading({
					title: '加载中...',
					// duration: 2000,
					mask: true
				})
				this.$http.post('/index/Communal/orderinfo', params).
				then(function(res) {
					uni.hideLoading()
					if (res && res.address) {
						_this.info = res
						_this.address = res.address
						_this.order_info = res.order_info
						_this.room_type = res.room_type
						_this.order_total_money = res.order_total_money
						_this.clean_requirements = res.clean_requirements
						_this.cleanliness_standard = res.cleanliness_standard
						_this.service_details_data = res.service_details_data
						_this.earning = res.earning
						_this.getQi()
					} else {
						uni.navigateTo({
							url: "/cleaningAdmin/home/home"
						})
					}

				})
			},

			

			// 开始报名
			startOrder() {
			
				if (!uni.getStorageSync('cleaningData').loin){
					this.loinClick()
					return
				}
				// if (uni.getStorageSync("cleaningData").state == 0 && uni.getStorageSync("cleaningData").loin) 
				// if(uni.getStorageSync("cleaningData").state == 0){
				// 	this.$refs.popup1.open();
				// 	return
				// }
				
					console.log(this.weiyue_count);
				let weiyue_count = this.weiyue_count
				let bond = this.bond
		
				// this.$refs.closeRulePopup.open()
				if(weiyue_count > 0 && bond <= 0){
					this.$refs.closeWeiPopup.open() 
				}else{
					this.$refs.closeRulePopup.open()
				}
			},
			weidialogConfirm(){
				uni.redirectTo({
					url: "/cleaningAdmin/my-deposit/my-deposit"
				});
			},
			weidialogClose(){
				this.$refs.closeWeiPopup.close()
			},
			baodialogConfirm(){
				uni.navigateTo({
					url: "/cleaningAdmin/my-deposit/my-deposit"
				});
			},
			baodialogClose(){
				this.$refs.closebaoPopup.close()
			},
			/**
			 * 获取用户信息
			 */
			async userinfo_bond() {
			  try {
			    // console.log('token =====>',token)
			    let res = await this.$http.post("/index/Login/userinfo");
				this.weiyue_count = res.weiyue_count
				this.bond = res.bond
			  } catch (e) {
			    throw new Error(e);
			  }
			},
			openTel: function() {
				let _this = this
				if (_this.address.tel) {
					uni.makePhoneCall({
						phoneNumber: _this.address.tel //仅为示例
					});
				}
			
			},
			// 触发开始报名事件开始报名
			startOrder1() {
				const params = {
					order_id: this.order_id,
					recommended_parent: 0,
				}
				if (uni.getStorageSync('parent_openid')) {
					params.recommended_parent = uni.getStorageSync('parent_openid')
				}
				uni.showLoading({
					title: '报名中...',
					mask: true
				})
				this.$http.post('/index/Cleanerorder/order_signup', params).then(res => {
					uni.hideLoading()
					setTimeout(() => {
						uni.showToast({
							title: '报名成功！',
							duration: 1000
						})
					}, 300);
					this.$refs.closeRulePopup.close()
					uni.redirectTo({
						url: "/cleaningAdmin/my-indent/my-indent"
					});

				}).catch(res => {
					uni.hideLoading()
					if(res.errMsg == '请先缴纳保证金'){
										this.$refs.closebaoPopup.open() 
					}else{
						setTimeout(() => {
							
							
							uni.showToast({
								title: res.errMsg,
								icon: 'none'
							})
						}, 300);
					}

				}, )
			},
			loinClick() {
			  let _this = this;
			  uni.getUserProfile({
			    desc: "用于小程序功能使用",
			    success: function (e) {
			      // 调用微信登录
			      _this.login(e.userInfo);
			    },
			    fail: (e) => {
			      // 拒绝授权
			      uni.showToast({
			        title: "登录失败",
			        icon: "none",
			      });
			    },
			  });
			},
			/**
			 * 微信登录
			 * @param {Object} info 授权成功获取的用户信息
			 */
			async login(info) {
			  let _this = this;
			  uni.showLoading({
			    title: "登录中....",
			  });
			  getApp().globalData.type = 2;
			  try {
			    /** === 1.wx获取登录用户code === */
			    let res = await uni.login({
			      provider: "weixin",
			    });
			    // 判断是否登录成功
			    if (res[0] != null) throw new Error("授权登录失败！请重新登录");
			    // console.log('res =====>',res)
			    // 获取code
			    let code = res[1].code;
			    // console.log('code =====>',code)
			    /** === 2.wx获取登录用户openid 等信息 === */
			    let rep = await _this.$http.post("/index/Login/getuserinfo", {
			      code,
			    });
			    uni.hideLoading();
			    // 获取保洁位置存到本地
			    let location = await uni.getLocation();
				// let latitude = location[1].latitude ? location[1].latitude : 108.964939
			    this.$set(this.cleaningData, "latitude", location[1].latitude);
			    this.$set(this.cleaningData, "longitude", location[1].longitude);
			    console.log("rep =====>", rep);
			    // 保存session_key  用于手机号获取解密
			    this.$set(this.cleaningData, "session", rep.session_key);
			    // 保存 openid
			    this.$set(this.cleaningData, "openid", rep.openid);
			    uni.setStorageSync("openid", rep.openid);
			    // console.log('rep =====>',rep)
			    /** === 3.请求获取 token === */
			    await this.getuid(info, rep.openid, rep.unionid);
			    /** === 4.请求获取 手机号 === */
			    let reo = await _this.$http.post(
			      "/index/Login/getphone",
			      {},
			      {
			        header: {
			          token: this.cleaningData.token,
			        },
			      }
			    );
			    // console.log('用户手机号',reo.phone)
			    // 保存用户手机
			    this.$set(this.cleaningData, "phone", reo.phone);
			    // console.log('用户手机号',reo.phone)
			    // 本地同步缓存 登录获取的相关信息
			    uni.setStorageSync("cleaningData", this.cleaningData);
			    // if (uni.getStorageSync("order_id") > 0) {
			    //   uni.redirectTo({
			    //     url: "/cleaningAdmin/my-indent/details/details?id=" + uni.getStorageSync("order_id"),
			    //   });
			    // }
			
			    uni.hideLoading();
			    // 判断是否弹出个人认证窗口
			    if (this.cleaningData.state == 0) this.$refs.popup1.open("center");
			    else if (this.cleaningData.state == 2) this.okClick("员工端");
			    else if (this.cleaningData.state == 3)
			      uni.showToast({
			        title: "认证未通过！请重新认证！",
			        icon: "none",
			        success() {
			          _this.$refs.popup1.open("center");
			        },
			      });
			    else {
			      uni.showToast({
			        title: "认证审核中！敬请等待！",
			        icon: "none",
			      });
			    }
			    // uni.navigateTo({
			    // 	url: "/cleaningAdmin/home/home"
			    // });
			  } catch (e) {
			    uni.hideLoading();
			    if (e.statusCode == 1004) this.$refs.popup2.open("center");
			    else
			      uni.showToast({
			        title: e.errMsg,
			        icon: "none",
			      });
			  }
			},
			/**
			 * 立即认证按钮
			 */
			renClick() {
			  this.$refs.popup1.close();
			  let path = this.url + "/my-approve/my-approve";

			  uni.redirectTo({
			  	url: "/cleaningAdmin/my-approve/my-approve"
			  });
			},
			/**
			 * 获取 token
			 */
			async getuid(info, openid, unionid) {
			  try {
			    let res = await this.$http.post("/index/Login/getuid", {
			      openid: openid,
			      unionid: unionid,
			      parent_openid: uni.getStorageSync("parent_openid") || "",
			      type: 2,
			      userInfo: {
			        nickname: info.nickName,
			        avatar: info.avatarUrl,
			        gender: info.gender,
			      },
			    });
			    // console.log('res =====>',res)
			    // 保存token
			    this.$set(this.cleaningData, "token", res.token);
			    // 缓存token 到本地
			    uni.setStorageSync("cleaningData", this.cleaningData);
			    // 获取用户信息
			    await this.userinfo(res.token);
			  } catch (e) {
			    throw new Error(e);
			  }
			},
			/**
			 * 获取用户信息
			 */
			async userinfo() {
			  try {
			    // console.log('token =====>',token)
			    let res = await this.$http.post("/index/Login/userinfo");
			    // console.log('res =====>',res)
			    this.$set(this.cleaningData, "nickname", res.real_name || res.nickname); // 昵称
			    this.$set(this.cleaningData, "avatar", res.avatar); // 头像
			    this.$set(this.cleaningData, "gender", res.gender); // 性别
			    this.$set(this.cleaningData, "phone", res.phone); // 电话
			    this.$set(this.cleaningData, "address", res.address); // 地址
			    this.$set(this.cleaningData, "state", res.cleaner_status); // 保洁认证状态
			    this.$set(this.cleaningData, "type", res.cleaner_type); // 保洁类型
			    this.$set(this.cleaningData, "wxopenid", res.wxopenid); // 微信公众openid
			    this.$set(this.cleaningData, "loin", true); // 更改登录状态
			    uni.setStorageSync("cleaningData", this.cleaningData);
			    let time = this.dateFormat(new Date().getTime());
			    let timestamp = this.dateFormat(new Date().getTime() - 24 * 60 * 60 * 1000);
			    if (res.cleaner_status === 2) {
			      console.log("uni.getStorageSync", uni.getStorageSync(time));
			      if (!uni.getStorageSync(time)) {
			        uni.setStorageSync(time, 1);
			        if (uni.getStorageSync(timestamp)) {
			          uni.removeStorage(timestamp);
			        }
			      } else {
			      }
			    }else if(res.cleaner_status === 3){
					uni.showToast({
					  title: "认证未通过！请重新认证！",
					  icon: "none",
					});
					this.$refs.popup1.open("center");
				}
			    time = 0;
			    // this.loin = uni.getStorageSync('cleaningData').loin
			  } catch (e) {
			    throw new Error(e);
			  }
			},
			// 取消订单
			closeOrder() {
				this.$refs.closeRulePopup.open()
			},
			// 此事件调用退单接口
			closeOrderQueding() {
				const params = {
					order_id: this.order_id
				}
				uni.showLoading({
					title: '取消中...',
					mask: true
				})
				this.$http.post('/index/Cleanerorder/cancel_order_signup', params).then(res => {
					uni.hideLoading()
					setTimeout(() => {
						uni.showToast({
							title: '取消成功',
							mask: true
						})
					}, 300);

					// this.$refs.closeRulePopup.open()
					uni.redirectTo({
						url: "/cleaningAdmin/my-indent/my-indent?tabIndex = 2"
					});
				}).catch(res => {
					if(res.errMsg == '请先缴纳保证金'){
										this.$refs.closebaoPopup.open() 
					}else{
						setTimeout(() => {
							
							
							uni.showToast({
								title: res.errMsg,
								icon: 'none'
							})
						}, 300);
					}
					

					uni.hideLoading()
				})
			},
			listClick(item) {
			  if (uni.getStorageSync("cleaningData").state !== 2) {
			    uni.showToast({
			      title: "请登录并且认证通过后再试!",
			      icon: "none",
			    });
			  } else {
				  uni.redirectTo({
				  	url: '/cleaningAdmin/my-indent/details/details?id=' + item.id + "&type=" + 2
				  })
			    if (item.is_full != 1) {
			      
			    }
			  }
			},
			RulePopupClose() {
				this.$refs.closeRulePopup.close()
			},
			openTel: function() {
				let _this = this
				if (_this.address.tel) {
					uni.makePhoneCall({
						phoneNumber: _this.address.tel //仅为示例
					});
				}

			},
			/**
			 * 立即推荐按钮事件
			 */
			recommend() {
				console.log('推荐')
			},
			/**
			 * 用户点击右上角分享（index.js）
			 */
			onShareAppMessage: function(ops) {
				let order_id = this.order_id
				if (ops.from === 'button') {
					// 来自页面内转发按钮
					console.log('----', ops.target)
				}
				return {
					title: this.order_info.hotel_name,
					path: `cleaningAdmin/my-indent/details/details?scene=${uni.getStorageSync('cleaningData').openid}&order_id=${order_id}`, // 路径，传递参数到指定页面。

				}
			},
			mapClick() {
				uni.openLocation({
					latitude: this.address.addr_latitude * 1,
					longitude: this.address.addr_longitude * 1,
					name: this.address.road,
					success: function() {
						console.log('success');
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.uni-card .uni-card__header .uni-card__header-content {
	  justify-content: flex-start!important;
	
	}
	.BOX {
		width: 100%;
		overflow: hidden;
		padding-bottom: 200rpx;
	}

	.order-top {
		height: 300rpx;
		padding: 20rpx 18rpx;
		background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
		font-family: PingFang-SC-Medium;
		color: #000;

		.order-top-location {
			display: flex;
			justify-content: space-between;
			margin-bottom: 14rpx;
		}

		.order-top-text {
			padding-left: 18rpx;
			font-size: 32rpx;
			font-weight: Medium;
		}
	}

	.order-info {
		position: relative;
		align-items: center;
		margin-top: 40rpx;
		padding: 30rpx 18rpx 55rpx 18rpx;
		background-color: #fff;
		border-radius: 15rpx;
		color: #000;

		.location-icon {
			width: 37rpx;
			height: 37rpx;
			margin-right: 20rpx;
			color: #2DE2A9;
		}

		.order-info-relation-top {

			font-size: 30rpx;

			.icons {
				position: absolute;
				right: 15rpx;
				top: 30rpx;
			}
		}

		.order-info-relation-bottom {
			font-size: 30rpx;
			width: 100%;
			margin-top: 20rpx;
			color: #000;
		}

	}

	.order-info2 {
		display: flex;
		justify-content: space-between;
		font-size: 36rpx;

		.order-info-color {
			color: #333;
		}

		.order-info-relation2 {
			font-size: 26rpx;
			color: #33D182;

			.order-info-phone {
				.uni-icons {
					margin-left: 10rpx;
				}
			}


			.order-info-map {
				margin-top: 25rpx;
				margin-right: 5rpx;
				color: #000;
			}

		}
	}

	.order-information {
		padding: 0 18rpx;
		margin-top: 50rpx;

		.uni-card {
			border-radius: 15rpx;
		}

		.order-information-room-info {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			width: 100%;

			.order-information-room-info-son {
				box-sizing: border-box;
				width: 30.3%;
				height: 130rpx;
				/* margin-left: 10rpx; */
				/* margin-bottom: 10rpx; */
				/* padding: 17rpx 0rpx 14rpx 0rpx; */
				text-align: center;
				background-color: #b1ddfb;
				border-radius: 5rpx;
				justify-content: center;
				align-items: center;
				padding-top: 22rpx;
				margin-bottom: 20rpx;

				.order-information-room-info-son-t {
					color: #FF4B4B;
					font-size: 28rpx;
					font-weight: 700;
				}

				.order-information-room-info-son-t text:first-child {
					font-size: 40rpx;
				}

				.order-information-room-info-son-b {
					display: flex;
					justify-content: center;
					color: #000;
					font-size: 24rpx;
				}

				.order-information-room-info-son-b2 {
					font-weight: 400;
					color: #000;
				}

			}
		}

		.order-information-price {
			margin-top: 26rpx;
			text-align: center;
			font-weight: Medium;
			color: #333333;
			margin-bottom: 40rpx;

			.order-information-price-top {
				font-weight: 700;
				font-size: 28rpx;
			}

			.order-information-price-bottom {
				opacity: .7;
				font-size: 26rpx;
			}

			.fengexian {
				width: 100%;
				height: 2rpx;
				background-color: #EDEDED;
				margin-top: 40rpx;
			}
		}

		.order-xuqiu {
			margin-top: 26rpx;
			box-sizing: border-box;
			// padding: 28rpx;
		}
	}

	.demo-uni-row {
		margin-bottom: 10px;

	}

	/deep/ .uni-row {
		margin-bottom: 10px;
	}

	.demo-uni-col {
		height: 36px;
		font-family: PingFang-SC-Medium;
		color: #757575;

		.demo-uni-col2 {
			font-weight: 600;
			color: #333;
		}
	}

	.order-welfare {
		padding: 0 18rpx;
		margin-top: 18rpx;
		color: #4A4A4A;
		font-family: PingFang-SC-Medium;
		font-size: 36rpx;

		&-son {
			margin-bottom: 30rpx;
		}

		.order-welfare-bottom {
			margin: 35rpx 0;
		}

		.uni-card {
			border-radius: 15rpx;
		}

		.lv {
			color: #333333;
			font-weight: bold;
		}

		.lv2 {
			margin-right: 15rpx;
		}

		.lv3 {
			font-size: 26rpx;
			opacity: .7;
		}

		.order-welfare-fuwu {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;
		}
	}

	.order-big-img {
		width: 100%;
		padding: 0 18rpx;
		margin: 18rpx auto;
		overflow: hidden;
		text-align: center;
		border-radius: 15rpx;
		image {
			width: 100%;
		}
	}

	.order-btn {
		margin-top: 30rpx;
		padding: 18rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 126rpx;
		background-color: #fff;
		button {
			width: 350rpx;
			height: 80rpx;
			border-radius: 0 80rpx 80rpx 0 ;
			line-height: 80rpx;
			font-size: 40rpx;
			border: 0;
			background-color: #b1ddfb;
			color: #FFFFFF;
			margin: 0;
			padding: 0;
		}
		button::after {
			display: none;
		}
		.button1 {
			background-color: #1C2D43;
			border-radius: 80rpx 0 0 80rpx;
			color: #D8EEFC;
		}
	}

	.order-btn-fixed {
		padding: 0;
		width: 100%;
		position: fixed;
		bottom: 0;
		height: 170rpx;
		margin: 0;
	}

	.uni-popup {
		border-radius: 20rpx;
	}

	.order-btn2 {
		margin-top: 0rpx;
		padding: 0rpx;
	}

	.examinePeoplePopup {

		&-zanwu {
			width: 400rpx;
			height: 100rpx;
			margin-top: 30rpx;
			text-align: center;
			font-weight: bold;
			color: #7F7F7F;
			font-size: 32rpx;
		}

		.uni-card {
			border-radius: 15rpx;
		}

		.examinePeoplePopup-row {
			display: flex;
			height: 140rpx;
			padding: 15rpx;
			margin-bottom: 30rpx;
			border-bottom: 2rpx solid #EDEDED;

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 15rpx;
			}
		}

		.dis-corder {
			display: flex;
			align-items: center;

			&-pj {
				font-size: 22rpx;
				font-weight: bold;
				color: #7F7F7F;
				line-height: 30rpx;
				border: 2rpx solid #8D8D8D;
				border-radius: 8rpx;
				margin-right: 10rpx;
				padding: 0 10rpx;
			}
		}

		.examinePeoplePopup-row1,
		.examinePeoplePopup-row2,
		.examinePeoplePopup-row3 {
			width: 350rpx;
			margin-left: 30rpx;
			display: flex;
			margin-bottom: 20rpx;

			.popupBtn {
				height: 40rpx;
				background-color: #47DD89;
				line-height: 40rpx;
				font-size: 30rpx;
				color: #fff;
				text-align: center;
				border-radius: 40rpx;
			}


		}

		.examinePeoplePopup-row2,
		.examinePeoplePopup-row3 {
			font-size: 30rpx;
		}

		.examinePeoplePopup-row1,
		.examinePeoplePopup-row3 {
			justify-content: space-between;

			&-name {
				font-size: 36rpx;
			}

			&-juli {
				font-size: 32rpx;
			}
		}

		.examinePeoplePopup-row2 .examinePeoplePopup-row2-img image {
			margin-right: 10rpx;
			width: 36rpx;
			height: 36rpx;
		}

		.examinePeoplePopup-row3 image {
			width: 36rpx;
			height: 36rpx;
			margin-right: 15rpx;
		}

		.examinePeoplePopup-row2 .examinePeoplePopup-row2-fuwu {
			margin-left: 30rpx;
		}
	}

	// 小图片和描述信息的对齐方式
	.dis-corder {
		display: flex;
		align-items: center;

		&-pj {
			font-size: 22rpx;
			font-weight: bold;
			color: #7F7F7F;
			line-height: 30rpx;
			border: 2rpx solid #8D8D8D;
			border-radius: 8rpx;
			margin-right: 10rpx;
			padding: 0 10rpx;
		}
	}
	.closeRule {
			position: relative;
	
			image {
				width: 500rpx;
				height: 550rpx;
			}
	
			.order-btn {
				width: 100%;
				justify-content: space-between;
				height: 126rpx;
				background-color: #fff;
				padding: 0 30rpx;
				button {
					width: 188rpx;
					height: 66rpx;
					border-radius: 44rpx;
					line-height: 66rpx;
					font-size: 26rpx;
					color: #FFFFFF;
					box-sizing: border-box;
				}
				.button1 {
					background: linear-gradient(-90deg, #fc6a6e, #ff9050);
				}
			}
	
	
			.closeRuleText {
				width: 100%;
				padding: 0 30rpx;
				position: absolute;
				font-family: PingFang-SC-Bold;
				color: #020202;
				font-size: 28rpx;
				left: 50%;
				top: 40%;
				transform: translateX(-50%);
				.closeRuleText-item{
					line-height: 36rpx;
					margin-bottom: 20rpx;
				}
			}
		}
		.order-info-map {
			width: 100rpx;
			color: #000;
			font-size: 24rpx;
			text-align: center;
			image{
				width: 42rpx;
				height: 42rpx;
				margin-bottom: 10rpx;
			}
		}
		.img{
			width: 92rpx;
			height: 92rpx;
			border-radius: 50%;
			margin-right: 24rpx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.ellipsis1{
			overflow: hidden;
			white-space: nowrap; /* 防止文字换行 */
			text-overflow: ellipsis;
		}
		.uni-list-item__container view{
					display: inline-block;
				}
	.home-order {
	    .v-slot-body-box {
	      width: 70%;
	    }
	
	    .v-slot-header {
	      position: relative;
	      margin-right: 20rpx;
	      width: 160rpx;
	      height: 160rpx;
		 
	      image {
	        width: 160rpx;
	        height: 160rpx;
	        border-radius: 15rpx;
	      }
	
	      &-son {
	        width: 120rpx;
	        height: 120rpx;
	        margin: -60rpx 0 0 -60rpx;
	        position: absolute;
	        left: 50%;
	        top: 50%;
	        border-radius: 60rpx;
	        background-color: rgba(255, 255, 255, 0.23);
	        line-height: 120rpx;
	        text-align: center;
	        font-weight: bold;
	
	        text {
	          color: #fff;
	          opacity: 0.9;
	        }
	      }
	    }
	
	    .v-slot-body {
	      font-weight: bold;
	      font-size: 30rpx;
	      font-family: PingFang-SC-Bold;
	      margin-bottom: 20rpx;
		 
	      text {
	        margin-right: 10rpx;
	      }
	    }
	
	    .h-o-b-main {
	      display: flex;
	      justify-content: flex-start;
	      margin-bottom: 20rpx;
	      align-items: center;
	
	      &-son {
	        font-weight: bold;
	        font-size: 28rpx;
	      }
	
	      &-anticipated_revenue {
	        font-size: 26rpx;
	        opacity: 0.9;
	      }
	
	      .juli {
	        opacity: 0.5;
	        font-size: 26rpx;
	      }
	
	      .anticipated_revenue {
	        font-size: 28rpx;
	        font-size: 500;
	        color: rgba($color: #000000, $alpha: 0.9);
	      }
	
	      .h-o-b-main-son {
	        font-size: 30rpx;
	
	        
	      }
	
	      .recommend {
	        display: flex;
	        width: 214rpx;
	        height: 50rpx;
	        justify-content: center;
	        text-align: center;
	        line-height: 46rpx;
	        margin-left: 20rpx;
	        box-sizing: border-box;
	        font-size: 24rpx;
	
	        .recommend-l {
	          background-color: #fff;
	          width: 40%;
	          color: #000;
	          border-radius: 10rpx 0 0 10rpx;
	          border: 2rpx solid #37d283;
	        }
	
	        .recommend-r {
	          background-color: #37d283;
	          width: 60%;
	          color: #fff;
	          border-radius: 0rpx 10rpx 10rpx 0rpx;
	          border: 2rpx solid #37d283;
	        }
	      }
	    }
	
	    // 列表中下划线隐藏
	    .uni-list--border-bottom,
	    .uni-list--border-top {
	      display: none;
	    }
	
	    // 列表每一项内容的样式
	    .uni-list-item__container {
	      box-sizing: border-box;
	      padding: 32rpx;
		  display: block !important;
	    }
		
	    .h-o-con {
	      display: flex;
	      align-items: center;
	      width: 100%;
	
	      .h-o-c-img {
	        width: 146rpx;
	        height: 146rpx;
	        border-radius: 20rpx;
	        border: 0;
	        margin-right: 20rpx;
	      }
	
	      .h-o-boy {
	        flex: 1;
	        display: flex;
	        flex-direction: column;
	        justify-content: space-between;
	        height: 146rpx;
	
	        .h-o-b-title {
	          // display: flex;
	          // justify-content: space-between;
	          // align-items: center;
	          // padding: 10rpx 0;
	        }
	      }
	    }
	  }
	  .qiangBtn{
	  	width: 180rpx;
	  	height: 64rpx;
	  	line-height: 64rpx;
	  	color: #fff;
	  	font-size: 32rpx;
	  	text-align: center;
	  	border-radius: 64rpx;
	  	background: linear-gradient(to right, #8dc9f1,#d8eefc);
	  }
	  .uni-list-item {
	    margin-bottom: 20rpx !important;
	  }
	  .pb{
	  	border-top: 2rpx solid #E8E8E8;
	  	padding-top: 20rpx;
	  }
	  .uni-list,
	  .uni-section{
		  background-color: rgba(0,0,0,0) !important;
	  }
	  .uni-section{
		  margin-top: 0 !important;
	  }
	  .hday{
	  	font-size: 26rpx;
	
	  	margin-bottom: 30rpx;
	  	width: 100%;
	  	display: flex !important;
	  	justify-content: space-between;
	  }
	  .home-empty {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    min-height: 400rpx;
		background-color: #fff;
	  
	    .h-o-img {
	      width: 226rpx;
	      height: 264rpx;
	      margin-bottom: 20rpx;
	    }
	  
	    .h-o-text {
	      font-size: 28rpx;
	      font-weight: 600;
	      color: #333333;
	    }
	  }
	  .uni-section-header{
		  display: none !important;
	  }
	  .tui-box{
		  display: flex;
		  font-size: 36rpx;
		  color: #030017;
		  justify-content: center;
		  height: 80rpx;
		  padding-top: 30rpx;
		  line-height: 50rpx;
		  align-items: center;
		  background-color: #fff;
		  font-weight: 500;
		  .tui-xian{
			  width: 88rpx;
			  height: 2rpx;
			  background-color: #A6A6A6;
			  margin: 0 24rpx;
		  }
	  }
	  .popup {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    box-sizing: border-box;
	    width: 492rpx;
	    border-radius: 20rpx;
	    background-color: #ffffff;
	    overflow: hidden;
	  
	    .p-title {
	      position: relative;
	  
	      .t-text {
	        position: absolute;
	        top: 50%;
	        left: 50%;
	        transform: translate(-50%, -50%);
	        font-size: 32rpx;
	        font-weight: 600;
	        color: #ffffff;
	      }
	    }
	  
	    .p-b-box {
	      height: 40rpx;
	    }
	  
	    .p-b-card {
	      display: flex;
	      flex-direction: column;
	      justify-content: center;
	      align-items: center;
	      margin: 50rpx;
	  
	      .c-text {
	        font-size: 24rpx;
	        font-weight: 600;
	        color: #333333;
	        margin-bottom: 16rpx;
	      }
	  
	      .c-text1 {
	        text-align: center;
	        line-height: 1.8em;
	      }
	    }
	  }
	  .p-b-but {
	    width: 100%;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    box-sizing: border-box;
	    margin-bottom: 34rpx;
	    padding: 0 54rpx;
	  
	    .but {
	      flex: 1;
	      line-height: 60rpx;
	      border: 1rpx solid #b7b7b7;
	      border-radius: 30rpx;
	      font-size: 24rpx;
	      font-weight: 600;
	      color: #999999;
	      margin: 0;
	      padding: 0;
	      background-color: #ffffff;
	    }
	  
	    .but1 {
	      border: 1rpx solid rgba($color: #000000, $alpha: 0);
	      color: #ffffff;
	      background: linear-gradient(101deg, #53e48d 0%, #53e48d 100%);
	      margin-left: 76rpx;
	    }
	  
	    .but::after {
	      display: none;
	    }
	  }
	  /deep/ .uni-card{
		  width: 100%;
	  }
</style>
